﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title id="titleName"></title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
        *, h3 {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="con_text" class="container-fluid">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                @*<div class="page-header">*@
                <h1>
                    <strong id="chartName">Who</strong><small>极简的沟通方式</small>
                </h1>
                @*</div>*@
            </div>
        </nav>
        <div>
            <div>
                <dl id="discussion" style="padding-bottom: 165px;"></dl>
            </div>

            <nav class="navbar navbar-default navbar-fixed-bottom">
                <ul class="breadcrumb">
                    <li>
                        <a href="#">
                            <i class="glyphicon glyphicon-comment"></i>
                            气泡
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="glyphicon glyphicon-picture"></i>
                            图片
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="glyphicon glyphicon-earphone"></i>
                            语音
                        </a>
                    </li> 
                    
                    <li>
                        <a href="javascript:void(0);" onclick="startVideo();">
                            <i class="glyphicon glyphicon-facetime-video"></i>
                            短视频
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" onclick="startVideo();">
                            <i class="glyphicon glyphicon-gift"></i>
                            礼物
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" onclick="startVideo();">
                            <i class="glyphicon glyphicon-heart"></i>
                            示爱
                        </a>
                    </li>
                    <li class="active">
                        <i class=""></i>
                        表情
                    </li>
                    @*<li role="presentation" class="disabled">
                            <a href="#">开通VIP/Buy VIP</a>
                        </li>*@
                </ul>
                <input type="hidden" id="displayname" value="Bill" />
                <div class="container">
                    @*<input type="text" id="clientMessage" placeholder=""/>*@
                    <div class="form-group has-default">
                        <textarea class="form-control" rows="3" style="width: 100%;" id="clientMessage" placeholder="回车发送 / Enter Sand"></textarea>
                        @*<button type="button" id="sendmessage" class="btn btn-primary">（Enter）发送</button>*@
                    </div>

                </div>
            </nav>
        </div>

    </div>
<div id="con_video" class="container-fluid">
    <video id="video" autoplay="" style="width:100%; height: 100%; border: 1px #ccc solid;"></video>  
</div>
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <script src="~/Scripts/jquery-1.6.4.min.js"></script>

    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.-->
    <script>
        $(function () {
            $("#con_video").hide();

            // Get the user name and store it to prepend to messages.
            $("#displayname").val(prompt("昵称:", ''));
            var _who = $("#displayname").val();

            // Reference the auto-generated proxy for the hub.
            var chat = $.connection.chat;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                var now = new Date();
                var nowStr = now.getFullYear() + "-" + now.getMonth() + "-" + now.getDay() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
                $("#discussion").append(
                    "<dt class=\"text-left\" style='font-size: .9em;padding-top: 10px;'><u>" + htmlEncode(name) + "</u>  <em>" + nowStr + "</em></dt><dd>" + message + "</dd>"
                );
            };


            $("#titleName").html("和 " + _who + " 聊天");
            $("#chartName").html(_who);
            // Set initial focus to message input box.
            $("#clientMessage").focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $("#sendmessage").click(function () {
                    send();
                });
                document.onkeydown = function (e) {
                    var ev = document.all ? window.event : e;
                    if (ev.keyCode === 13) {
                        send();
                        e.preventDefault();
                        $("#clientMessage").val(null);
                    }
                };

                function send() {
                    // Call the Send method on the hub.
                    chat.server.send($("#displayname").val(), $("#clientMessage").val());
                    // Clear text box and reset focus for next comment.
                    //$("#clientMessage").val("").focus();

                    window.scrollTo(-10, document.body.scrollHeight);
                }
            });
        });

        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $("<div />").text(value).html();
            return encodedValue;
        }


        //video
        function errocb() {
            console.log('sth wrong!');
        }
        var video = document.getElementById("video");
        //var context = canvas.getContext("2d");
        function startVideo() {
            console.log('start video!');
            $("#con_video").show();
            $("#con_text").hide();

            if (navigator.getUserMedia) { // 标准的API
                navigator.getUserMedia({ "video": true }, function (stream) {
                    video.src = stream;
                    video.play();
                }, errocb);
            } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
                navigator.webkitGetUserMedia({ "video": true }, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errocb);
            }
        }

    </script>
</body>
</html>

